<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src='../assets/mapbox-gl-dev.js'></script>
    <link href='../assets/mapbox-gl.css' rel='stylesheet'/>
</head>
<body>
<div id='map'></div>
<script>
    class IridiumMap {
        constructor(map_info) {
            this.mapInfo = map_info;
            this.init();
            this.load();
        }

        init() {
            mapboxgl.accessToken = 'pk.eyJ1IjoibWFvcmV5IiwiYSI6ImNqNWhrenIwcDFvbXUyd3I2bTJxYzZ4em8ifQ.KHZIehQuWW9AsMaGtATdwA';
            this.map = new mapboxgl.Map({
                container: 'map',
                center: [this.mapInfo.longitude, this.mapInfo.latitude],
                zoom: this.mapInfo.zoom,
                minZoom: this.mapInfo.zoom,
                maxZoom: this.mapInfo.maxzoom,
                style: {
                    "version": 8,
                    "sources": {},
                    "layers": [{
                        'id': 'background',
                        'type': 'background',
                        'paint': {
                            'background-color': 'rgba(0,0,0,0)'
                        },
                        'interactive': true
                    }],
                    "_ssl": true
                }
            });
        }

        load() {
            this.map.on('load', function () {
                map.addLayer({
                    'id': 'wms-layer',
                    'type': 'raster',
                    'source': {
                        'type': 'raster',
                        'tiles': [this.mapInfo.url + '?' + 'bbox={bbox-epsg-3857}&' + 'format=image/png&' + 'service=WMS&' + 'version=1.1.1&' + 'request=GetMap&' + 'srs=EPSG:3857&' + 'width=256&' + 'height=256&' + 'layers=' + map_info.layer],
                        'tileSize': 256
                    }
                });
            })
        }
    }

    let iridiumMap = new IridiumMap({
        "name": "\u82b1\u679c\u5c71\u98ce\u666f\u533a\u7535\u5b50\u5730\u56fe",
        "b_zone_id": 1,
        "url": "http:\/\/192.168.1.3:8888\/geoserver\/hgs\/wms",
        "longitude": "119.27382231",
        "latitude": "34.64245889",
        "zoom": "14",
        "maxzoom": "22",
        "layer": "hgs:hgs",
    });

</script>
</body>
</html>